<template>
    <div class="login-wrapper">
        <div class="bg-wrapper">
            <div class="left-wrapper">
                <img src="@/assets/images/logo_2.png" class="logo-img" />
                <span class="title">后台管理系统</span>
            </div>
            <div class="right-wrapper">
                <el-form :model="loginData" :rules="rules" ref="loginForm">
                    <div class="login-title">欢迎登录</div>
                    <el-form-item class="input-item" prop="username">
                        <el-input v-model.trim="loginData.username" size="large" clearable class="input-field"
                            placeholder="用户名" :prefix-icon="User" @input="removeChinese" />
                    </el-form-item>
                    <el-form-item class="input-item" prop="password">
                        <el-input v-model.trim="loginData.password" size="large" show-password class="input-field"
                            type="password" placeholder="密码" :prefix-icon="Lock" />
                    </el-form-item>
                    <el-form-item class="input-item" prop="role">
                        <el-select v-model="loginData.role" placeholder="请选择身份" class="input-field">
                            <el-option label="管理员" value="admin" />
                            <el-option label="教师" value="teacher" />
                            <el-option label="学生" value="student" />
                        </el-select>
                    </el-form-item>
                    <el-form-item class="submit-item">
                        <el-button type="primary" class="submit-button" size="large" :loading="isLoading"
                            @click="handleLogin">
                            {{ isLoading ? '登录中...' : '登录' }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { User, Lock } from '@element-plus/icons-vue';
import { authApi } from '@/request/apiService';
import { useAuthStore } from '@/store/authStore';

const loginData = ref({ username: '', password: '', role: 'student' }); // 默认选择学生身份
const isLoading = ref(false);
const router = useRouter();
const loginForm = ref(null);
const authStore = useAuthStore();

const rules = {
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    role: [{ required: true, message: '请选择身份', trigger: 'change' }],
};

const handleLogin = async () => {
    const isValid = await loginForm.value.validate();
    if (!isValid) return;

    isLoading.value = true;
    try {
        const response = await authApi.login(loginData.value);
        const { id, username, token, role } = response;

        authStore.setAuthData({ id, username, token, role });

        if (loginData.value.role === 'admin') {
            router.push('/user-management');
        } else {
            router.push('user/search');
        }
    } finally {
        isLoading.value = false;
    }
};

const removeChinese = () => {
    loginData.value.username = loginData.value.username.replace(/[一-龥]/g, '');
};
</script>

<style scoped>
.login-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('@/assets/images/login_bg.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-wrapper {
    display: flex;
    width: 70%;
    height: 65%;
    opacity: 0.95;
}

.left-wrapper {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #6190e8;
    border-radius: 5px 0 0 5px;
    flex-direction: column;
}

.title {
    color: white;
    font-size: 30px;
    margin-top: 30px;
}

.right-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 0 5px 5px 0;
}

.login-title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 40px;
    width: 300px;
}

.logo-img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.input-item {
    margin-top: 20px;
}

.input-field {
    width: 300px;
}

.submit-item {
    margin-top: 30px;
}

.submit-button {
    width: 100%;
}
</style>
